<template>
  <MenuItem v-if="!itemObj.children" :index="itemObj.target">
    <template slot="title">
      <i class="iconfont" :class="itemObj.icon"></i>
      <span>
        {{ itemObj.name }}
      </span>
    </template>
  </MenuItem>
  <Submenu v-else :index="itemObj.target" :key="itemObj.targer">
    <template slot="title">
      <i class="iconfont" :class="itemObj.icon"></i>
      <span>
        {{ itemObj.name }}
      </span>
    </template>
    <WebHeaderItem
      v-for="(item, index) in itemObj.children"
      :key="index"
      :itemObj="item"
    />
  </Submenu>
</template>
<script>
import { MenuItem, Submenu } from "element-ui";
export default {
  name: "WebHeaderItem",
  props: {
    itemObj: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    MenuItem,
    Submenu
  }
};
</script>
